<template>
  <a-modal
    :open="open"
    width="1000px"
    title="装备配发"
    centered
    :ok-button-props="{ disabled: !isCompleted }"
    ok-text="保存"
    destroy-on-close
    @ok="onOk"
    @cancel="onCancel"
  >
    <div class="flex">
      <div class="w-full form-style-flex">
        <a-form :model="formState" class="form-style-flex" :label-col="{ style: { width: '95px' } }">
          <a-form-item name="equipmentName" label="装备名称" class="w-1/2" v-bind="validateInfos.equipmentName">
            <SelectTable v-model:value="formState.equipmentName" type="装备配发" :table-width="1000" @select="onSelect" />
          </a-form-item>
          <!-- v-bind="validateInfos.zjm" -->
          <a-form-item name="zjm" label="助记码" class="w-1/2">
            <a-input v-model:value="formState.zjm" disabled placeholder="请输入" />
          </a-form-item>
          <a-form-item name="supplierName" label="供应商" class="w-1/2">
            <a-input v-model:value="formState.supplierName" disabled placeholder="请输入" />
          </a-form-item>
          <a-form-item name="classificationName" label="资产分类" class="w-1/2">
            <SelectAsset
              v-model:value="formState.classificationName"
              @change="
                (event) => {
                  formState.classificationId = event
                }
              "
            />
          </a-form-item>
          <a-form-item name="brand" label="品牌" class="w-1/2">
            <a-input v-model:value="formState.brand" placeholder="请输入" />
          </a-form-item>
          <a-form-item name="model" label="型号" class="w-1/2">
            <a-input v-model:value="formState.model" placeholder="请输入" />
          </a-form-item>
          <a-form-item name="specifications" label="规格" class="w-1/2">
            <a-input v-model:value="formState.specifications" disabled placeholder="请输入" />
          </a-form-item>
          <a-form-item name="unit" label="单位" class="w-1/2">
            <a-input v-model:value="formState.unit" disabled placeholder="请输入" />
          </a-form-item>
          <a-form-item name="qty" label="数量" class="w-1/2" v-bind="validateInfos.qty">
            <a-input v-model:value="formState.qty" placeholder="请输入" @blur="onBlurInput" />
          </a-form-item>
          <a-form-item name="kcl" label="当前库存量" class="w-1/2">
            <a-input v-model:value="formState.kcl" disabled placeholder="请输入" />
          </a-form-item>
          <a-form-item name="assetValue" label="资产价值" class="w-1/2">
            <a-input v-model:value="formState.assetValue" placeholder="请输入" />
          </a-form-item>
          <a-form-item name="assetNature" label="资产性质" class="w-1/2">
            <a-input v-model:value="formState.assetNature" placeholder="请输入" />
          </a-form-item>
          <a-form-item name="expectedLimit" label="预计使用年限" class="w-1/2">
            <a-input v-model:value="formState.expectedLimit" placeholder="请输入" />
          </a-form-item>
          <a-form-item name="assetDescription" label="资产描述" class="w-full">
            <a-input v-model:value="formState.assetDescription" placeholder="请输入" />
          </a-form-item>
          <a-form-item name="manufacturer" label="生产厂家" class="w-full">
            <a-input v-model:value="formState.manufacturer" disabled placeholder="请输入" />
          </a-form-item>
          <a-form-item name="manufactureTime" label="生产日期" class="w-1/2">
            <a-input v-model:value="formState.manufactureTime" disabled placeholder="请输入" />
          </a-form-item>
          <a-form-item name="registrationNumber" label="注册证号" class="w-1/2">
            <a-input v-model:value="formState.registrationNumber" disabled placeholder="请输入" />
          </a-form-item>

          <a-form-item label="使用手册" class="w-full">
            <a-upload :file-list="fileList" accept=".doc,.docx,.pdf,.xls,.xls,.xlsx" :custom-request="beforeUpload" @remove="handleRemove">
              <a-button>
                <upload-outlined />
                上传文档
              </a-button>
            </a-upload>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </a-modal>
</template>
<script setup>
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import axios from 'axios'
import { post } from '@/utils/request'
import SelectAsset from '@/components/SelectAsset'

const emit = defineEmits(['update:open', 'success'])

const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => ({})
  },
  title: {
    type: String,
    default: ''
  }
})
const fileList = ref([])

const formState = ref({
  equipmentName: '',
  zjm: '',
  qty: '',
  empName: '',
  supplierName: '',
  classificationId: '',
  classificationName: '',
  brand: '',
  manufacturer: '',
  manufactureTime: '',
  registrationNumber: '',
  model: '',
  specifications: '',
  unit: '',
  assetValue: '',
  assetNature: '',
  expectedLimit: '',
  assetDescription: ''
})
const rulesState = ref({
  equipmentName: [{ required: true, message: '请选择装备名称' }],
  //   zjm: [{ required: true, message: '助记码不能为空' }],
  qty: [{ required: true, message: '数量不能为空' }]
})

const { isCompleted, resetFields, validate, validateInfos } = useForm(formState, rulesState)

const onBlurInput = () => {
  if (Number(formState.value.qty) > Number(formState.value.kcl)) {
    return message.error('数量不可超过库存量')
  }
}
const onSelect = (select) => {
  formState.value = {
    ...formState.value,
    ...select,
    manufactureTime: select?.scrq
  }
}
const beforeUpload = async (options) => {
  const { file } = options

  const isLt2M = file.size / 1024 / 1024 < 10
  if (!isLt2M) {
    message.error('上传文件最大10MB!')
    return
  }
  const formData = new FormData()
  formData.append('file', file)
  fileList.value = fileList.value.filter((item) => {
    return item.url
  })
  const { data: res } = await axios.post('/api/v1/common/util/doUploadFile', formData, { headers: { 'Content-Type': 'multipart/form-data' } })
  if (res.code !== 0) return message.error(res.msg)
  fileList.value = [
    {
      uid: fileList.value.length,
      name: file.name,
      status: 'done',
      url: res.data.picturePath
    }
  ]
  formState.value.userManualName = file.name
  formState.value.userManualUrl = res.data.picturePath
}

const handleRemove = (file) => {
  const index = fileList.value.indexOf(file)
  const newFileList = fileList.value.slice()
  newFileList.splice(index, 1)
  fileList.value = newFileList
  formState.value.userManualName = ''
  formState.value.userManualUrl = ''
}

const onOk = async () => {
  await validate()
  if (Number(formState.value.qty) > Number(formState.value.kcl)) {
    return message.error('数量不可超过库存量')
  }

  const res = await post('/war/equipmentDistribution/doSaveEquipmentDistribution', formState.value)
  if (res.code === 0) {
    message.success(res.msg)

    emit('success')
    onCancel()
  } else {
    message.error(res.msg)
  }
}

watch(
  () => props.open,
  (val) => {
    if (val) {
      if (props.rowData?.id) {
        formState.value = { ...props.rowData }
        if (formState.value.userManualName && formState.value.userManualUrl) {
          fileList.value = [
            {
              uid: fileList.value.length,
              name: formState.value.userManualName,
              status: 'done',
              url: formState.value.userManualUrl
            }
          ]
        } else {
          fileList.value = []
        }
      } else {
        fileList.value = []
        formState.value = {}
      }
    }
  }
)

const onCancel = () => {
  emit('update:open', false)
  resetFields()
}
</script>
<style lang="less" scoped></style>
